<template>
  <view class="complant-my">
    <u-sticky>
      <view class="nav">
        <u-tabs
          :list="list1"
          :scrollable="false"
          :activeStyle="{
            color: '#3D3D3D',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
          :inactiveStyle="{ color: '#6D6D6D', transform: 'scale(1)' }"
          itemStyle="padding-left: 30rpx; padding-right: 30rpx;padding-bottom: 10rpx; height: 80rpx;margin:0 auto"
        >
        </u-tabs>
      </view>
    </u-sticky>
    <view class="guess">
      <text class="nowLevel" @click="toworkOrder">查看</text>
      <view class="title"
        ><span style="color: #9d9d99">投诉类型：</span>产品建议</view
      >
      <view class="title"
        ><span style="color: #9d9d99">提交时间：</span>2022-07-08 15:30</view
      >
      <view class="title"
        ><span style="color: #9d9d99">投诉说明：</span
        >不好用啊巴拉巴拉不好用啊巴拉巴拉小魔仙变身</view
      >
      <view class="title"
        ><span style="color: #9d9d99; margin-bottom: 20rpx">处理状态：</span
        >处理中</view
      >
      <u-line length="90%" margin="0rpx 30rpx"></u-line>
      <!-- 			<view class="advicebtn" @click="backout">
				<u-button shape="circle"  type="primary" size="normal">撤销</u-button>
			</view> -->
      <view class="btn">
        <button
          class="btmed"
          style="border: 1px solid #3d3d3d; color: #3d3d3d"
          @click="wantmore"
        >
          <image
            src="../../static/server_mag/notg.png"
            mode=""
            style="width: 19px; height: 19px; margin-top: 10rpx"
          ></image>
          未解决
        </button>
        <button
          @click="finish"
          class="btmed"
          style="border: 1px solid #157afe; color: #157afe"
        >
          <image
            src="../../static/server_mag/over.png"
            mode=""
            style="width: 19px; height: 19px"
          ></image
          >已解决
        </button>
      </view>
    </view>
    <u-popup
      class="tup"
      :show="morespeak"
      :round="10"
      :safeAreaInsetTop="true"
      :closeable="popupData.closeable"
      :closeOnClickOverlay="popupData.closeOnClickOverlay"
      @close="close"
    >
      <view style="height: 35vh; overflow: auto">
        <text
          style="
            display: flex;
            justify-content: center;
            font-size: 32rpx;
            background-color: #fff;
            position: sticky;
            top: 0;
          "
          >补充投诉</text
        >
        <view class="" style="margin: 20rpx 30rpx 0">
          <u-textarea
            placeholder="请描述你具体遇到的问题~"
            v-model="inform.intro"
            maxlength="500"
            height="100"
          ></u-textarea>
          <text style="color: red; font-size: 24rpx" v-if="tips == true"
            >内容不能为空！</text
          >
        </view>
        <view
          style="
            background-color: #fff;
            position: fixed;
            bottom: 0rpx;
            width: 100vw;
            height: 10vh;
          "
        >
          <!-- <u-button text="确认" customStyle="background: #157AFE;color: #fff;
						border-radius: 40rpx;width: 90vw;height:90rpx;left:35rpx;right: 35rpx;" @click="deal">
					</u-button> -->
          <button
            @click="deal"
            :class="{ activer: inform.intro !== '' }"
            class="qrbtn"
          >
            确认
          </button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: [
        {
          name: "处理中",
        },
        {
          name: "已完结",
        },
      ],
      morespeak: false,
      tips: false,
      popupData: {
        closeable: true,
        closeOnClickOverlay: true,
      },
      inform: {
        intro: "",
      },
    };
  },
  onReady() {
    // this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    toworkOrder() {
      uni.navigateTo({
        url: "/pagesServe/workOrder/workOrder",
      });
    },
    deal() {
      if (!this.inform.intro.length) {
        return (this.tips = true);
      } else {
        this.tips = false;
      }
    },
    close() {
      this.morespeak = false;
    },
    backout() {
      uni.showToast({
        title: "好耶~虫虫鸡腿保住了",
        icon: "success",
      });
    },
    finish() {
      uni.showToast({
        title: "叮咚~这个难题解决咯",
        icon: "success",
      });
    },
    wantmore() {
      this.morespeak = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.advicebtn ::v-deep .u-button--primary {
  color: #157afe;
  background-color: transparent;
  border-color: #157afe;
}

.advicebtn ::v-deep .u-button {
  width: 160rpx;
  height: 70rpx;
  font-size: 28rpx;
}

.advicebtn {
  box-sizing: border-box;
  margin: 0rpx 0rpx 0 480rpx;
  padding: 30rpx;
  display: flex;
}

.complant-my {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  .qrbtn {
    background: #cececc;
    color: #fff;
    border-radius: 40rpx;
    width: 90vw;
    height: 90rpx;
    margin-left: 35rpx;
    margin-right: 35rpx;
  }
  .activer {
    background: #157afe;
  }
  .nav {
    background-color: #fff;
    padding-bottom: 10rpx;
    display: flex;
    justify-content: space-evenly;
  }

  .guess {
    background-color: #fff;
    margin: 30rpx 32rpx;
    border-radius: 20rpx;

    .nowLevel {
      font-size: 20rpx;
      padding: 18rpx 40rpx;
      color: #fff;
      background: #157afe;
      border-radius: 0 20rpx 0 20rpx;
      float: right;
      font-size: 28rpx;
    }

    .title {
      font-size: 30rpx;
      font-weight: 500;
      padding: 30rpx 0 0 32rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .btn {
      display: flex;
      justify-content: flex-end;
      padding: 30rpx 0;

      .btmed {
        margin-right: 20rpx;
        border-radius: 40rpx;
        font-size: 30rpx;
        width: 180rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }
    }
  }
}
</style>
